<template>
	<div class="product-select">
		<el-form :inline="true" :model="formData" class="demo-form-inline">
			<el-form-item label="">
				<el-input v-model="formData.keyword" placeholder="页面名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" max-height="500" border style="width: 100%">
			<el-table-column label="" width="35" align="center">
				<template v-slot="scope">
					<el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="页面名称">
			</el-table-column>
			<el-table-column prop="updateTime" label="更新时间">
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>
	</div>
</template>

<script lang="ts">
	import {
		toRefs,
		reactive,
		onMounted,
	} from 'vue';

	export default {
		name: 'custom-page-select',
		setup() {
			const state = reactive({
				tableRadio: '',
				currentPage: 1,
				total: 0,
				pageSize: 10,
				formData: {
					keyword: ''
				},
				tableData: []
			});
			
			// 获取自定义列表
			const getTableData = () => {
				var paramsData = {
					page: state.currentPage,
					pageSize: state.pageSize
				}
				if (state.formData.keyword) {
					paramsData.search = state.formData.keyword
				}
				let params = {
					url: state.selectCanvasCustomList,
					method: 'POST',
					data: paramsData
				}
				//state.sendReq(params);
			}
			// 搜索
			const onSubmit = () => {
				getTableData();
			}
			// 每页条数改变
			const handleSizeChange = (val) => {
				state.pageSize = val
				getTableData()
			}
			// 当前页改变
			const handleCurrentChange = (val) => {
				state.currentPage = val
				getTableData()
			}
			
			onMounted(() => {
				getTableData();
			})
			
			return {
				onSubmit,
				handleSizeChange,
				handleCurrentChange,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.product-select {
		.el-pagination {
			padding: 0px;
			margin-top: 30px;
		}
	}
</style>
